<template>
  <div class="news">
    <n-card v-for="item in newslist" :key="item">
      <n-row>
        <n-col :span="4">
          <n-image
            width="100"
            src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
        /></n-col>
        <n-col :span="16">
          <div style="text-align: left">
            <h3>{{ item.title }}</h3>
            <span>{{ item.content }}</span>
          </div>
        </n-col>
        <n-col
          :span="4"
          style="display: flex; justify-content: center; align-items: center"
        >
          <n-statistic label="阅读量" :value="item.readquantity"> </n-statistic
        ></n-col>
      </n-row>
    </n-card>
  </div>
</template>

<script lang="ts">
import {Ref, ref } from "vue";
class NewsItem {
  title: string;
  content: string;
  readquantity:number;
  constructor(title: string, content: string,readquantity:number) {
    this.title = title;
    this.content = content;
    this.readquantity=readquantity
  }
}
export default {
  name: "News",
  setup() {
    const newslist: Ref<NewsItem[]> = ref([
      new NewsItem(
        "新闻标题1",
        "埃德加卡了上帝阿阿斯顿难道马上拿到几点回去无比的骄傲是ask九三打死你的撒按时每学年卡仕达世界杯喀什年卡四年参加迪王i我去比武权威编辑",
        111
      ),
      new NewsItem("新闻标题2", "撒即可打开拉萨的拉伸靠谱的考评生命中。没戏了",111),
      new NewsItem("新闻标题3", "i蔷薇科蔷薇你的扫街阿松i查看为你打开存储",231),
      new NewsItem("新闻标题4", "jasjbsdhsad",89),
      new NewsItem("新闻标题5", "jasjbsdhsad",5),
    ]);

    return {
      newslist,
    };
  },
};
</script>

<style scoped>
.news {
  padding: 0 10%;
}
</style>